<template>
  <div ref="chart" class="charts chart-pie"></div>
</template>

<script>
export default {
  name: 'verticalColumn',
  props: {
    rankingregional: {
      type: Object
    }
  },
  watch: {
    rankingregional: {
      handler(newVal) {
        console.log(newVal)
        this.rankingregional = newVal
        this.getEchartData()
      },
      deep: true, // 对象内部属性的监听，关键。
      immediate: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getEchartData()
    })
  },
  methods: {
    getEchartData() {
      const chart = this.$refs.chart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            top: '15%',
            right: '3%',
            left: '10%',
            bottom: '12%'
          },
          xAxis: [
            {
              type: 'category',
              data: this.rankingregional.category,
              axisLine: {
                lineStyle: {
                  color: 'rgb(127, 127, 127)'
                }
              },
              axisLabel: {
                margin: 5,
                color: 'rgb(127, 127, 127)',
                textStyle: {
                  fontSize: 12
                }
              },
              axisTick: {
                show: false
              }
            }
          ],
          yAxis: [
            {
              axisLabel: {
                formatter: '{value}',
                color: 'rgb(127, 127, 127)'
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#3CBDD0'
                }
              },
              splitLine: {
                lineStyle: {
                  color: 'rgba(255,255,255,0.12)'
                }
              }
            }
          ],
          series: [
            {
              type: 'bar',
              data: this.rankingregional.list,
              barWidth: '6px',
              borderRadius: '8px',
              itemStyle: {
                normal: {
                  color: '#3CBDD0',
                  shadowColor: '#3CBDD0',
                  shadowBlur: 1
                }
              }
            }
          ]
        }
        myChart.setOption(option)
        window.addEventListener('resize', function () {
          myChart.resize()
        })
      }
    }
  }
}
</script>

<style scoped>
.charts {
  width: 100%;
  height: 400px;
}
</style>
